import {
  ProFormDateTimePicker,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Modal, message } from 'antd';
import React from 'react';

// 更新 FormValueType 接口
export interface FormValueType extends Partial<API.StudentInfo> {
  name?: string;
  studentId?: string;
  gender?: string;
  birthDate?: string;
  parentName?: string;
  relationship?: string;
  contact?: string;
  createdTime?: string;
  updatedTime?: string;
  registeredBy?: string;
  updatedBy?: string;
  remainingClasses?: number;
}

// 更新 UpdateFormProps 接口
export interface UpdateFormProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.StudentInfo>;
  handleUpdate: (fields: FormValueType) => Promise<boolean>;
}

const UpdateForm: React.FC<UpdateFormProps> = (props) => (
  <StepsForm
    stepsProps={{
      size: 'small',
    }}
    stepsFormRender={(dom, submitter) => {
      return (
        <Modal
          width={640}
          bodyStyle={{ padding: '32px 40px 48px' }}
          destroyOnClose
          title="学生信息配置"
          open={props.updateModalVisible}
          footer={submitter}
          onCancel={() => props.onCancel()}
        >
          {dom}
        </Modal>
      );
    }}
    onFinish={async (values) => {
      const success = await props.handleUpdate(values);
      if (success) {
        props.onSubmit(values);
      }
    }}
  >
    <StepsForm.StepForm
      initialValues={props.values}
      title="基本信息"
    >
      <ProFormText
        width="md"
        name="name"
        label="学生姓名"
        rules={[{ required: true, message: '请输入学生姓名！' }]}
      />
      <ProFormText
        width="md"
        name="studentId"
        label="学号"
        rules={[{ required: true, message: '请输入学号！' }]}
      />
      <ProFormSelect
        width="md"
        name="gender"
        label="性别"
        valueEnum={{
          male: '男',
          female: '女',
        }}
      />
      <ProFormDateTimePicker
        name="birthDate"
        label="出生日期"
        rules={[{ required: true, message: '请选择出生日期！' }]}
      />
    </StepsForm.StepForm>
    <StepsForm.StepForm
      initialValues={props.values}
      title="家长信息"
    >
      <ProFormText
        width="md"
        name="parentName"
        label="家长姓名"
        rules={[{ required: true, message: '请输入家长姓名！' }]}
      />
      <ProFormSelect
        width="md"
        name="relationship"
        label="关系"
        valueEnum={{
          father: '父亲',
          mother: '母亲',
          other: '其他',
        }}
      />
      <ProFormText
        width="md"
        name="contact"
        label="联系方式"
        rules={[{ required: true, message: '请输入联系方式！' }]}
      />
    </StepsForm.StepForm>
    <StepsForm.StepForm
      initialValues={props.values}
      title="其他信息"
    >
      <ProFormDateTimePicker
        name="createdTime"
        label="创建时间"
        rules={[{ required: true, message: '请选择创建时间！' }]}
      />
      <ProFormDateTimePicker
        name="updatedTime"
        label="更新时间"
        rules={[{ required: true, message: '请选择更新时间！' }]}
      />
      <ProFormText
        width="md"
        name="registeredBy"
        label="注册人"
        rules={[{ required: true, message: '请输入注册人！' }]}
      />
      <ProFormText
        width="md"
        name="updatedBy"
        label="更新人"
        rules={[{ required: true, message: '请输入更新人！' }]}
      />
      <ProFormText
        width="md"
        name="remainingClasses"
        label="剩余课时"
        rules={[{ required: true, message: '请输入剩余课时！' }]}
      />
    </StepsForm.StepForm>
  </StepsForm>
);

export default UpdateForm;
